<template>
    <div>
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/sms/coupon' }">
                    订单
                </el-breadcrumb-item>
                <el-breadcrumb-item>退货原因详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <el-card class="box-card">
                <div style="margin: 10px 0;">
                    退货商品
                </div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column label="商品图片" width="160">
                        <template #default="scope">
                            <div>
                                <el-image style="width: 100px; height: 100px" :src="scope.row.productPic" fit="cover" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="315">
                        <template #default="scope">
                            <div>{{ scope.row.productName }}</div>
                            <div>品牌：{{ scope.row.productBrand }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格/货号" width="180">
                        <template #default="scope">
                            <div>价格：￥{{ scope.row.productRealPrice }}</div>
                            <div>货号：NO.{{ scope.row.productId }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="属性" width="180">
                        <template #default="scope">
                            <div>{{ scope.row.productAttr }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productCount" label="数量" width="100" />
                    <el-table-column label="小计" width="105">
                        <template #default="scope">
                            <div>￥{{ Number(scope.row.productCount) * Number(scope.row.productRealPrice) }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="height: 30px;">
                    <div style="float: right;line-height: 30px;">
                        <span style="line-height: 30px;">合计：￥</span>
                        <span style="line-height: 30px;color:red;">{{ obj.productCount * obj.productRealPrice }}</span>
                    </div>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 30px;">
                <el-descriptions title="服务单信息" :column="1" border>
                    <el-descriptions-item label="服务单号" width="400px">{{ obj.id }}</el-descriptions-item>
                    <el-descriptions-item label="申请状态" width="400px">{{ val }}</el-descriptions-item>
                    <el-descriptions-item label="订单编号" width="400px">{{ obj.orderSn }} <span @click="onrouteritem" style="color: blue;cursor: pointer;">查看</span></el-descriptions-item>
                    <el-descriptions-item label="申请时间" width="400px">{{
                        obj.createTime
                        ? dayjs(obj.createTime
                        ).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="使用账号" width="400px">{{ obj.memberUsername }}</el-descriptions-item>
                    <el-descriptions-item label="联系人" width="400px">{{ obj.returnName }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话" width="400px">{{ obj.returnPhone }}</el-descriptions-item>
                    <el-descriptions-item label="退货原因" width="400px">{{ obj.reason }}</el-descriptions-item>
                    <el-descriptions-item label="问题描述" width="400px">{{ obj.description }}</el-descriptions-item>
                    <el-descriptions-item label="凭证图片" width="400px">
                        <img :src="obj.productPic" alt="" width="100">
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions :column="1" border style="margin-top: 20px;">
                    <el-descriptions-item label="订单金额" width="400px">￥{{ obj.productRealPrice }}</el-descriptions-item>
                    <el-descriptions-item label="确认退款金额" width="400px">
                        ￥<input type="text" :placeholder="inpplaceholder" disabled>
                    </el-descriptions-item>
                    <el-descriptions-item label="选择收货点" width="400px">
                        <el-select class="m-2" :placeholder="objchild.addressName">
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="收货人姓名" width="400px">{{ objchild.name }}</el-descriptions-item>
                    <el-descriptions-item label="所在区域" width="400px">{{ objchild.province }} {{
                        objchild.region }}</el-descriptions-item>
                    <el-descriptions-item label="详细地址" width="400px">{{ objchild.detailAddress
                    }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话" width="400px">{{ objchild.phone }}</el-descriptions-item>
                </el-descriptions>

                <el-descriptions :column="1" border style="margin-top: 20px;">
                    <el-descriptions-item label="处理人员" width="400px">{{ obj.handleMan }}</el-descriptions-item>
                    <el-descriptions-item label="处理时间" width="400px">
                        {{
                            obj.handleTime
                            ? dayjs(obj.handleTime
                            ).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="处理备注" width="400px">{{ obj.handleNote }}</el-descriptions-item>
                </el-descriptions>

                <el-descriptions :column="1" border style="margin-top: 20px;">
                    <el-descriptions-item label="收货人员" width="400px">{{ obj.handleMan }}</el-descriptions-item>
                    <el-descriptions-item label="收货时间" width="400px">
                        {{
                            obj.receiveTime
                            ? dayjs(obj.receiveTime
                            ).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="收货备注" width="400px">{{ obj.receiveNote }}</el-descriptions-item>
                </el-descriptions>
            </el-card>


        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { Tickets, Search } from '@element-plus/icons-vue'
import useTable from '../../hooks/useTables'
import * as api from '../../json/request/api'
import type { Ref } from "vue"
import { useRouter, useRoute } from 'vue-router'
import type { IDataFace } from "../../json/request/QmsAdminConreiller/index"
import dayjs from "dayjs"
let route = useRoute()
let router = useRouter()
let val = ref('')
let inpplaceholder = ref('')

let tableData = ref([]) as Ref<IDataFace[]>
let objchild = ref({}) as Ref<{
    addressName: string
    city: boolean
    detailAddress: string
    id: number
    name: string
    phone:string
    province:string
    receiveStatus:number
    region:string
    sendStatus:number
}>

let options = [
    {
        value: "待处理",
        label: '待处理'
    }, {
        value: "退货中",
        label: '退货中'
    }, {
        value: "已完成",
        label: '已完成'
    }, {
        value: "已拒绝",
        label: '已拒绝'
    }
]
let obj = ref({}) as Ref<IDataFace>
(async function () {
    obj.value = await api.admin.returnApplyitem(Number(route.query.id))
    console.log(obj.value);
    
    tableData.value.push(obj.value)
    val.value = options[obj.value.status].label
    inpplaceholder.value = obj.value.returnAmount.toString()
    objchild.value = obj.value.companyAddress
})()

let onrouteritem = () =>{
    router.push("/oms/orderDetail?id="+obj.value.orderId)
}


</script>

<style scoped>
.card {
    margin: 30px auto;
    margin-top: 60px;
    margin-bottom: 30px;
    width: 1080px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep .cell {
    text-align: center;
}

.my-label {
    background: var(--el-color-success-light-9);
}

.my-content {
    background: var(--el-color-danger-light-9);
}
</style>